import { reactive } from "vue";
import { page, deleteByIds } from "@/api/health";
import router from "@/router/index";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts";
import { view } from "@/api/view";
import tabs from "./tabs";
import shortcuts from "./shortcuts";

export const _$ = reactive({
  tabs: [...tabs],
  shortcuts: [...shortcuts],
  currentTabIndex: 0,
  currentChart: {},
  query: {
    requestParam: {
      timeSetting: [],
      startTime: "",
      endTime: "",
      dataType: "",
      dateType: "",
    },
    responseParam: {
      total: 0,
      records: [],
    },
  },
  delete: {
    requestParam: {
      ids: [],
    },
    responseParam: {},
  },
});

export const $ = {
  initChart() {
    _$.currentChart = null;
    const index = _$.currentTabIndex;
    var chartDom = document.getElementById(`main-${index}`);
    if (
      _$.query.requestParam.timeSetting &&
      _$.query.requestParam.timeSetting.length > 0
    ) {
      _$.query.requestParam.startTime = _$.query.requestParam.timeSetting[0];
      _$.query.requestParam.endTime = _$.query.requestParam.timeSetting[1];
    }
    _$.query.requestParam.timeSetting = null;
    view(_$.tabs[index].api, _$.query.requestParam).then((data) => {
      if (_$.tabs[index].type === "zhe") {
        $.initZhe(chartDom, data);
      } else if (_$.tabs[index].type === "zhu") {
        $.initZhu(chartDom, data);
      } else if (_$.tabs[index].type === "bing") {
        $.initBing(chartDom, data);
      }
    });
  },

  initZhe(chartDom, data) {
    var myChart = echarts.init(chartDom);
    const option = {
      xAxis: {
        type: "category",
        data: data.x,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: data.y,
          type: "line",
        },
      ],
    };
    option && myChart.setOption(option);
  },

  initZhu(chartDom, data) {
    var myChart = echarts.init(chartDom);
    const option = {
      xAxis: {
        type: "category",
        data: data.x,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: data.y,
          type: "bar",
        },
      ],
    };
    option && myChart.setOption(option);
  },

  initBing(chartDom, data) {
    var myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: "Referer of a Website",
        subtext: "Fake Data",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: data.list,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    option && myChart.setOption(option);
  },

  onSearch() {
    $.initChart();
  },

  onTabChange(id) {
    _$.currentTabIndex = id;
    $.initChart();
  },

  onDelete() {
    ElMessageBox.confirm("确定删除吗？", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      deleteByIds({
        ids: _$.delete.requestParam.ids.join(","),
      }).then((_) => {
        $.onSearch();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      });
    });
  },

  onReset() {
    _$.query.requestParam = {
      pageNum: 0,
      pageSize: 10,
      condition: "",
    };
    $.onSearch();
  },

  handleSizeChange(val) {
    _$.query.requestParam.pageSize = val;
    $.onSearch();
  },

  handleCurrentChange(val) {
    _$.query.requestParam.pageNum = val;
    $.onSearch();
  },

  handleSelectionChange(e) {
    _$.delete.requestParam.ids.length = 0;
    e.forEach((item) => {
      _$.delete.requestParam.ids.push(item.id);
    });
  },

  clean() {
    _$.query = {
      requestParam: {
        timeSetting: [],
        startTime: "",
        endTime: "",
        dataType: "",
        dateType: "",
      },
      responseParam: {
        total: 0,
        records: [],
      },
    };
    _$.currentChart = {};
    _$.delete = {
      requestParam: {
        ids: [],
        delFlag: "N",
      },
      responseParam: {},
    };
  },
};

export const to = {
  goToIndex() {
    router.push({
      path: "/manage/health",
    });
  },

  goToDetail(id) {
    router.push({
      path: "/manage/health/detail",
      query: {
        id: id,
      },
    });
  },
};
